<template>
  <page-main class="page-appointment-index" :back-url="backUrl">
    <div class="status">
      <template v-if="info.payStatus == '0' && info.makeStatus != '3'">
        <div class="icon">
          <!-- <van-icon :class="'icon-'+info.makeStatus" :name="info.makeStatus != 3 ? 'passed' : 'close'" size="48" /> -->
          <van-icon name="cash-back-record" size="48" class="c-yellow" />
        </div>
        <div class="title">          
          <h3 class="c-yellow">待支付</h3>
        </div>
      </template>
      <template v-else>
        <div class="icon">
          <van-icon :class="'icon-'+info.makeStatus" :name="info.makeStatus != 3 ? 'passed' : 'close'" size="48" />
        </div>
        <div class="title">
          <!-- <h3>{{info.makeStatus == 1 ? '预约成功' : '取消预约'}}</h3> -->
          <h3>{{$util.setName(info.makeStatus, init_data.makeStatus_list)}}</h3>
        </div>
      </template>
    </div>
    
    <van-cell-group inset class="van-cell-left">
      <van-cell class="doctor" label="xxx">
        <div slot="icon" class="icon"><van-image :src="info.staffPicture" round width="40px" height="40px" /></div>
        <div class="name">
          <b>{{info.makeStaffName}}</b>
          <span>{{$util.setName(staff.professionalTitle, init_data.professional_list)}}</span>
        </div>
      </van-cell>
      <!-- <van-cell title="就诊医院" :value="info.hospital" /> -->
      <!-- <van-cell title="医院地址" :value="info.hospital" /> -->
      <van-cell title="就诊科室" :value="info.officeName" />
      <van-cell title="就诊时间" :value="info.schedulingYearTime" />
      <!-- <van-cell title="候诊时间" :value="info.hospital" /> -->
      <van-cell title="费用">
        <span class="c-red">{{info.registrationFee}}</span>元
      </van-cell>
    </van-cell-group>
    <div class="p-t-15"></div>
    <van-cell-group inset class="van-cell-left">
      <van-cell title="就诊人" :value="info.custName"/>
      <van-cell title="身份证号" :value="info.idNo" />
    </van-cell-group>

    <div class="p-a-15">
      <van-button type="info" block :loading="btn_loading" @click="submitPay" v-if="info.payStatus == '0' && info.makeStatus !='3'" class="m-b-15">确认支付</van-button>
      <div class="flex-block">
        <van-button type="default" plain block @click="goHome">返回首页</van-button>
        <van-button type="info" plain block :loading="cancel_loading" @click="handleCancel" v-if="info.makeStatus == '0'" class="m-l-15">取消预约</van-button>
      </div>
    </div>
  </page-main>
</template>
<script>
export default {
  data(){
    return {
      from: '',
      backUrl: null,
      btn_loading: false,
      cancel_loading: false,
      info:{
        staffName: '张三',
        hospital:'xxxx',
        status:1, //0取消，1成功，2已完成
      },
      staff:{},
      init_data:{},
    }
  },
  async created(){
    this.$toast.clear();
    this.from = this.$route.query.form;
    if(this.from == 'add'){
      this.backUrl = '/layout/home';
    }
    await this.getInitData();
    this.getDetail();
  },
  methods:{
    async getInitData(){
      this.init_data.makeStatus_list = await this.$util.getDictList('make_status');
      this.init_data.professional_list = await this.$util.getDictList('professional_title');
    },
    getIcon(status){
      let name;
      switch(status){
        case '0':
          name = '';
          break;
        case '1':
          name = '';
          break;
        case '2':
          name = '';
          break;
        case '3':
          name = '';
          break
      }
      return name;
    },
    getDetail(){
      this.$http('get', '/admin/registrationApi/'+ this.$route.query.makeId, {}, async (data,msg) => {
        this.info = data;
        this.staff = await this.$http('get', '/admin/officeApi/staffOrScheduling/'+data.makeStaffId, {})
        this.info.staffPicture = this.$util.baseUrl + this.staff.staffPicture;
      })
    },
    handleCancel(){
      this.$dialog.confirm({
        message: '确认取消此次预约吗？',
      }).then(() => {
        this.cancel_loading = true;
        this.$http('put', '/admin/registrationApi/retreatRegist/'+this.info.makeId, {}, (data,msg) => {
          this.cancel_loading = false;
          if(this.info.payStatus == '0'){
            this.$toast.success('取消成功！');
          }else{
            this.$dialog.alert({
              title: '取消成功',
              message: '退款金额将原路返回，请注意查收'
            }).then(() => {

            });
          }
          this.getDetail();
        },msg => {
          this.cancel_loading = false;
        })
      })
      .catch(() => {
        // on cancel
      });
    },
    goHome(){
      this.$util.gotoPage('/');
    },
    async submitPay(){
      this.btn_loading = true;
      let params = {
        openId: localStorage.getItem('openId'),
        paymentType:2,
        theBillId: [this.info.theBillId],
        totalPaymentAmt: this.info.registrationFee
      };
      this.$toast.loading({
        message: '支付中，请稍等...',
        forbidClick: true,
      });
      this.$store.dispatch('submitAndPayGet', params).then(res => {
        setTimeout(() => {
          this.$toast.clear();
          this.btn_loading = false;
        }, 5000);        
      }).catch(error => {
        this.$toast.clear();
        this.btn_loading = false;
      });
      
      
      
    }
  }
}
</script>